<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园助手</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#EC4899', // 主色调：粉色
                        secondary: '#F472B6', // 辅助色：浅粉色
                        accent: '#BE185D', // 强调色：深粉色
                        dark: '#1E293B', // 深色
                        light: '#FDF2F8'  // 浅色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-color) 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
    <link href="/css/style.css" rel="stylesheet">
    
    <!-- 检查登录状态 -->
    <script>
        // 页面加载时检查用户是否已登录
        window.addEventListener('DOMContentLoaded', function() {
            console.log('index.html页面加载，检查登录状态');
            const token = localStorage.getItem('token');
            const username = localStorage.getItem('username');
            console.log('token存在?', !!token);
            console.log('username存在?', !!username);
            console.log('localStorage内容:', localStorage);
            
            // 如果未登录，重定向到登录页面
            if (!token || !username) {
                console.log('未登录，重定向到登录页面');
                window.location.href = '/login.html';
            } else {
                console.log('已登录，显示用户名:', username);
                // 显示用户名
                document.getElementById('logged-in-username').textContent = username;
            }
        });
    </script>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">校园助手</h1>
            </div>
            <nav class="hidden md:flex space-x-8">
                <a href="/homepage.html" class="text-gray-600 hover:text-primary transition-custom">主页</a>
                <a href="#chat-module" class="text-gray-600 hover:text-primary transition-custom">AI答题</a>
                <a href="#file-upload" class="text-gray-600 hover:text-primary transition-custom">文件处理</a>
                <a href="#history" class="text-gray-600 hover:text-primary transition-custom">历史记录</a>
            </nav>
            <div class="flex items-center space-x-4">
                <!-- 用户信息展示 -->
                <div class="md:flex items-center space-x-2">
                    <span id="logged-in-username" class="text-gray-600"></span>
                    <button id="logout-button" class="text-gray-500 hover:text-red-500 transition-custom">
                        <i class="fa fa-sign-out"></i>
                    </button>
                </div>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-gray-600 hover:text-primary transition-custom">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                    <a href="/homepage.html" class="text-gray-600 hover:text-primary py-2 transition-custom">主页</a>
                    <a href="#chat-module" class="text-gray-600 hover:text-primary py-2 transition-custom">AI答题</a>
                    <a href="#file-upload" class="text-gray-600 hover:text-primary py-2 transition-custom">文件处理</a>
                    <a href="#history" class="text-gray-600 hover:text-primary py-2 transition-custom">历史记录</a>
                    <div class="flex items-center space-x-2">
                        <span id="mobile-logged-in-username" class="text-gray-600"></span>
                        <button id="mobile-logout-button" class="text-gray-500 hover:text-red-500 transition-custom">
                            <i class="fa fa-sign-out"></i>
                        </button>
                    </div>
                </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 介绍部分 -->
        <section class="mb-8 text-center">
            <div class="inline-block p-2 px-4 rounded-full gradient-primary text-white font-medium mb-4 shadow-lg">
                <i class="fa fa-rocket mr-2"></i>DeepSeek API
            </div>
            <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-gray-800 mb-4">
                <span class="text-primary">AI答题助手</span>
            </h2>
        </section>

        <!-- 结合的聊天模块：结果展示 + 输入提示 -->
        <section id="chat-module" class="mb-10 bg-white rounded-xl shadow-lg overflow-hidden transition-custom hover:shadow-xl">
            <!-- 结果展示部分 -->
            <div class="p-6 border-b border-gray-100">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">
                        <i class="fa fa-comments text-primary mr-2"></i>AI答题
                    </h3>
                    <div class="flex space-x-3">
                        <button id="copy-result" class="px-3 py-1 text-sm border border-primary/30 rounded-lg text-primary hover:bg-primary/5 transition-custom hidden">
                            <i class="fa fa-copy mr-1"></i>复制结果
                        </button>
                        <button id="download-response" class="px-3 py-1 text-sm border border-purple/30 rounded-lg text-purple/50 hover:bg-purple/5 transition-custom" disabled>
                            <i class="fa fa-download mr-1"></i>下载为 MD
                        </button>
                    </div>
                </div>
                <div id="result-content" class="min-h-[300px] border border-gray-200 rounded-lg p-4 bg-gray-50 overflow-auto scrollbar-hide">
                    <div class="text-center py-12 text-gray-500">
                        <i class="fa fa-robot text-5xl mb-4 block"></i>
                        <p class="text-lg">DeepSeek 助手随时为您服务</p>
                        <p class="text-sm mt-2">请在下方输入您的问题，我将尽力为您解答</p>
                    </div>
                </div>
            </div>

            <!-- 文本输入部分 -->
            <div class="p-6">
                <div class="space-y-4">
                    <div class="space-y-2">
                            <textarea id="prompt" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg input-focus transition-custom resize-none" placeholder="请输入您的问题或提示..."></textarea>
                            <div class="flex items-center justify-between">
                                <div id="selected-file-info" class="flex items-center space-x-2 text-sm text-gray-600 hidden">
                                    <i class="fa fa-file-text-o text-primary"></i>
                                    <span id="selected-file-name"></span>
                                    <button id="remove-selected-file" class="text-gray-400 hover:text-red-500">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <label for="chat-file-input" class="px-3 py-1 border border-gray-300 rounded-lg hover:bg-gray-50 cursor-pointer text-sm">
                                        <i class="fa fa-upload mr-1"></i>上传文件
                                    </label>
                                    <input type="file" id="chat-file-input" class="hidden" accept=".txt,.md,.json,.csv,.html,.htm,.xml,.js,.css">
                                </div>
                            </div>
                        </div>
                    
                    <div class="grid grid-cols-3 gap-4">
                        <div class="space-y-1">
                            <select id="model" class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus transition-custom text-sm">
                                <option value="deepseek-chat">deepseek-chat</option>
                                <option value="deepseek-reasoner">deepseek-reasoner</option>
                            </select>
                        </div>
                        <div class="space-y-1">
                            <input type="number" id="temperature" min="0" max="2" step="0.1" value="0.7" class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus transition-custom text-sm">
                        </div>
                        <div class="space-y-1">
                            <input type="number" id="max-tokens" min="1" max="4096" value="1024" class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus transition-custom text-sm">
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between pt-2">
                        <div class="flex items-center space-x-4">
                            <div class="flex items-center space-x-2 text-sm text-gray-600">
                                <input type="checkbox" id="save-to-history" class="rounded text-primary focus:ring-primary/50">
                                <label for="save-to-history">保存到历史记录</label>
                            </div>
                            <button id="clear-prompt" class="px-3 py-1 text-sm border border-red/30 rounded-lg text-red hover:bg-red/5 transition-custom">
                                <i class="fa fa-trash-o mr-1"></i>清空
                            </button>
                        </div>
                        <button id="generate-response" class="px-6 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom font-medium flex items-center">
                            <i class="fa fa-paper-plane mr-2"></i>发送
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 文件上传部分 -->
        <section id="file-upload" class="mb-10 bg-white rounded-xl shadow-lg p-6 transition-custom hover:shadow-xl">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">
                <i class="fa fa-file-text-o text-primary mr-2"></i>文件上传
            </h3>
            
            <div class="flex flex-col md:flex-row gap-6 items-start">
                <div id="file-drop-area" class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-custom cursor-pointer bg-gray-50 h-48 flex flex-col items-center justify-center flex-1">
                    <input type="file" id="file-input" class="hidden" accept=".md">
                    <i class="fa fa-file-text-o text-4xl text-primary/70 mb-3"></i>
                    <p class="text-gray-600">上传 Markdown 文件</p>
                    <p class="text-xs text-gray-400 mt-1">.md 格式，最大 10MB</p>
                </div>
                
                <div class="flex-1 md:flex-initial md:w-64 space-y-4 w-full">
                    <div id="file-info" class="hidden items-center space-x-2 p-3 bg-gray-50 rounded-lg border border-gray-200">
                        <i class="fa fa-file-text-o text-blue"></i>
                        <span id="file-name" class="text-gray-700 truncate flex-grow"></span>
                        <button id="remove-file" class="text-gray-500 hover:text-red-500 transition-custom">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                    
                    <button id="upload-file" class="w-full px-4 py-3 gradient-secondary text-white rounded-lg hover:opacity-90 transition-custom font-medium flex items-center justify-center shadow-md">
                            <i class="fa fa-upload mr-2"></i>上传并处理
                        </button>
                </div>
            </div>
        </section>

        <!-- 历史记录部分 -->
        <section id="history" class="mb-10 bg-white rounded-xl shadow-lg p-6 transition-custom hover:shadow-xl">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fa fa-history text-primary mr-2"></i>历史记录
                </h3>
                <button id="clear-history" class="px-3 py-1 text-sm border border-red/30 rounded-lg text-red hover:bg-red/5 transition-custom">
                            <i class="fa fa-trash mr-1"></i>清空历史
                        </button>
            </div>
            <div id="history-list" class="space-y-3 max-h-[300px] overflow-y-auto scrollbar-hide">
                <div class="text-center py-6 text-gray-500">
                    <p>暂无历史记录</p>
                </div>
            </div>
        </section>

        <!-- 关于信息已移除 -->
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-code text-primary text-xl"></i>
                        <h3 class="text-lg font-bold">校园助手</h3>
                    </div>
                    <p class="text-gray-400 text-sm">
                        为校园生活提供便捷服务，包含天气提醒、AI答题助手和地图查询功能。
                    </p>
                </div>
                <div>
                    <h4 class="text-md font-semibold mb-4">功能链接</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li><a href="#text-input" class="hover:text-white transition-custom">文本生成</a></li>
                        <li><a href="#file-upload" class="hover:text-white transition-custom">文件处理</a></li>
                        <li><a href="#history" class="hover:text-white transition-custom">历史记录</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-md font-semibold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-sm text-gray-400">
                        <li class="flex items-center"><i class="fa fa-envelope-o mr-2"></i> support@deepseek-api.example</li>
                        <li class="flex items-center"><i class="fa fa-github mr-2"></i> github.com/deepseek-api</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-500">
                © 2024 校园助手. 保留所有权利.
            </div>
        </div>
    </footer>

    <!-- 加载中模态框 -->
    <div id="loading-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full flex flex-col items-center">
            <div class="w-16 h-16 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-4 glow"></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">处理中</h3>
            <p class="text-gray-600 text-center" id="loading-message">正在处理，请稍候...</p>
        </div>
    </div>

    <!-- 错误提示模态框 -->
    <div id="error-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-3">
                    <i class="fa fa-exclamation-triangle text-red"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800">错误</h3>
            </div>
            <p class="text-gray-600 mb-4" id="error-message">发生错误，请重试。</p>
            <div class="flex justify-end">
                <button id="close-error-modal" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-custom">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 成功提示模态框 -->
    <div id="success-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-3">
                    <i class="fa fa-check text-green"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800">成功</h3>
            </div>
            <p class="text-gray-600 mb-4" id="success-message">操作已成功完成。</p>
            <div class="flex justify-end">
                <button id="close-success-modal" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-custom">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 移动端用户信息展示 -->
    <div id="mobile-user-profile" class="hidden md:hidden"></div>

    <script src="/js/app.js"></script>
    <!-- 引入包含登录/注册和验证码功能的JavaScript文件 -->
    <script src="/js/app-updated.js"></script>
</body>
</html>